{% extends 'base/base.html' %}

{% block main %}
<!-- 为轮播图预留空间 -->
<div id="carousel-placeholder" style="height: 300px; background-color: #f0f2f5; margin-bottom: 30px; display: flex; align-items: center; justify-content: center;">
    <p class="text-muted mb-0">轮播图区域</p>
</div>

<div class="container">
    <div class="row">
        <!-- 左侧主要内容 -->
        <div class="col-md-8">
            <!-- 热门帖子 -->
            <div class="card mb-4">
                <div class="card-header bg-white py-3">
                    <h5 class="mb-0">热门帖子</h5>
                </div>
                <div class="card-body p-0">
                    <div class="post-list-item">
                        <div class="d-flex justify-content-between">
                            <h3 class="post-title mb-2">
                                <a href="#" class="text-decoration-none">【经验分享】如何高效准备期末考试？</a>
                            </h3>
                            <span class="badge bg-danger badge-sm">置顶</span>
                        </div>
                        <p class="post-excerpt mb-2">分享几个我在大学期间总结的复习技巧，希望能帮助到大家...</p>
                        <div class="post-meta d-flex justify-content-between">
                            <div>
                                <span class="me-3">计算机学院 · 张三</span>
                                <span class="me-3">2025-10-15</span>
                                <span class="me-3">浏览 1.2k</span>
                                <span>回复 45</span>
                            </div>
                            <div>
                                <span class="badge bg-success badge-sm">精华</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="post-list-item">
                        <h3 class="post-title mb-2">
                            <a href="#" class="text-decoration-none">【求助】数据结构中二叉树遍历算法理解困难</a>
                        </h3>
                        <p class="post-excerpt mb-2">对于二叉树的几种遍历方式总是理解不透彻，有没有大佬能帮忙讲解一下？</p>
                        <div class="post-meta d-flex justify-content-between">
                            <div>
                                <span class="me-3">软件工程 · 李四</span>
                                <span class="me-3">2025-10-14</span>
                                <span class="me-3">浏览 867</span>
                                <span>回复 23</span>
                            </div>
                            <div>
                                <span class="badge bg-warning badge-sm">待解决</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="post-list-item">
                        <h3 class="post-title mb-2">
                            <a href="#" class="text-decoration-none">【讨论】食堂新菜品评价</a>
                        </h3>
                        <p class="post-excerpt mb-2">新开的麻辣香锅窗口味道怎么样？性价比如何？大家来聊聊~</p>
                        <div class="post-meta d-flex justify-content-between">
                            <div>
                                <span class="me-3">生活区 · 王五</span>
                                <span class="me-3">2025-10-14</span>
                                <span class="me-3">浏览 542</span>
                                <span>回复 67</span>
                            </div>
                            <div>
                                <span class="badge bg-info badge-sm">热议</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="post-list-item">
                        <h3 class="post-title mb-2">
                            <a href="#" class="text-decoration-none">【实习】某互联网公司前端开发实习内推</a>
                        </h3>
                        <p class="post-excerpt mb-2">本人所在公司正在招聘寒假实习生，岗位为前端开发，有兴趣的同学可以联系我。</p>
                        <div class="post-meta d-flex justify-content-between">
                            <div>
                                <span class="me-3">信息学院 · 赵六</span>
                                <span class="me-3">2025-10-13</span>
                                <span class="me-3">浏览 1.5k</span>
                                <span>回复 89</span>
                            </div>
                            <div>
                                <span class="badge bg-primary badge-sm">实习</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-white text-center">
                    <a href="#" class="text-decoration-none">查看更多帖子 »</a>
                </div>
            </div>
        </div>
        
        <!-- 右侧边栏 -->
        <div class="col-md-4">
            <!-- 论坛统计 -->
            <div class="card mb-4 forum-stats">
                <div class="card-header bg-white py-3">
                    <h5 class="mb-0">论坛统计</h5>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="stat-number">2,841</div>
                            <div class="stat-label">注册会员</div>
                        </div>
                        <div class="col-6">
                            <div class="stat-number">15,628</div>
                            <div class="stat-label">帖子总数</div>
                        </div>
                        <div class="col-6 mt-3">
                            <div class="stat-number">1,234</div>
                            <div class="stat-label">今日发帖</div>
                        </div>
                        <div class="col-6 mt-3">
                            <div class="stat-number">86</div>
                            <div class="stat-label">在线人数</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 板块导航 -->
            <div class="card mb-4">
                <div class="card-header bg-white py-3">
                    <h5 class="mb-0">论坛板块</h5>
                </div>
                <div class="card-body">
                    <a href="#" class="category-item">
                        <div class="d-flex justify-content-between">
                            <span>学习交流区</span>
                            <span class="text-muted">1,234</span>
                        </div>
                    </a>
                    <a href="#" class="category-item">
                        <div class="d-flex justify-content-between">
                            <span>生活分享区</span>
                            <span class="text-muted">876</span>
                        </div>
                    </a>
                    <a href="#" class="category-item">
                        <div class="d-flex justify-content-between">
                            <span>社团活动区</span>
                            <span class="text-muted">543</span>
                        </div>
                    </a>
                    <a href="#" class="category-item">
                        <div class="d-flex justify-content-between">
                            <span>就业招聘区</span>
                            <span class="text-muted">321</span>
                        </div>
                    </a>
                    <a href="#" class="category-item">
                        <div class="d-flex justify-content-between">
                            <span>校园新闻区</span>
                            <span class="text-muted">98</span>
                        </div>
                    </a>
                </div>
            </div>
            
            <!-- 用户排行榜 -->
            <div class="card">
                <div class="card-header bg-white py-3">
                    <h5 class="mb-0">活跃用户榜</h5>
                </div>
                <div class="card-body">
                    <div class="user-rank-item">
                        <div class="rank-badge top-1">1</div>
                        <div class="flex-grow-1">
                            <strong>张三</strong>
                            <div class="text-muted small">发帖 342 | 积分 1286</div>
                        </div>
                    </div>
                    <div class="user-rank-item">
                        <div class="rank-badge top-2">2</div>
                        <div class="flex-grow-1">
                            <strong>李四</strong>
                            <div class="text-muted small">发帖 298 | 积分 1154</div>
                        </div>
                    </div>
                    <div class="user-rank-item">
                        <div class="rank-badge top-3">3</div>
                        <div class="flex-grow-1">
                            <strong>王五</strong>
                            <div class="text-muted small">发帖 267 | 积分 987</div>
                        </div>
                    </div>
                    <div class="user-rank-item">
                        <div class="rank-badge">4</div>
                        <div class="flex-grow-1">
                            <span>赵六</span>
                            <div class="text-muted small">发帖 213 | 积分 876</div>
                        </div>
                    </div>
                    <div class="user-rank-item">
                        <div class="rank-badge">5</div>
                        <div class="flex-grow-1">
                            <span>钱七</span>
                            <div class="text-muted small">发帖 189 | 积分 765</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}